<template>
	<view class="lsc-enroll-info">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">活动详情</block>
		</cu-custom>
		<view class="image-content">
			<image :src="(list.iconUrl || '/static/no_pictrue.jpg')" mode="aspectFill" style="width: 100%; height: 500upx; background-color: #FFFFFF;"></image>
		</view>
		<view class="bg-white">
			<view class="lsc-item">
				<view class="lsc-item-title">
					<text>{{list.title}}</text>
				</view>
				<view class="lsc-item-action">
					<text class="text-left text-blue text-sm">[进行中]</text>
					<text class="cuIcon-attention text-grey fr">
						<text class="padding-sm">{{watchTimes}}</text>
					</text>
					
				</view>
			</view>
			<view class="lsc-info">
				<view class="lsc-info-item">
					<view class="content">
						<text class="cuIcon-countdown text-grey"></text>
						<text class="text-grey padding-sm text-sm">报名时间：{{list.applyBeginDate}} {{list.applyBeginTime}} - {{list.applyEndDate}} {{list.applyEndTime}}</text>
					</view>
				</view>
				<view class="lsc-info-item">
					<view class="content">
						<text class="cuIcon-recharge text-grey"></text>
						<text class="text-grey padding-sm text-sm">报名费用：{{list.fee}}元</text>
					</view>
				</view>
				<view class="lsc-info-item">
					<view class="content">
						<text class="cuIcon-friend text-grey"></text>
						<text class="text-grey padding-sm text-sm">报名人数：{{list.maxCount}}</text>
					</view>
				</view>
				<view class="lsc-info-item">
					<view class="content">
						<text class="cuIcon-countdown text-grey"></text>
						<text class="text-grey padding-sm text-sm">活动时间：{{list.activityBeginDate}} {{list.activityBeginTime}} - {{list.activityEndDate}} {{list.activityEndTime}}</text>
					</view>
				</view>
				<view class="lsc-info-item">
					<view class="content">
						<text class="cuIcon-location text-grey"></text>
						<text class="text-grey padding-sm text-sm">活动地址：{{list.address}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white margin-top">
			<view class="lsc-content">
				<view class="lsc-content-info">
					{{list.detail}}
				</view>
				<view class="">
					<image v-for="(item,index) in list.photosList"  :key="index" :src="item" mode="widthFix" style="width: 100%;"></image>
				</view>
			</view>
		</view>
		
		<view class="bg-white margin-top">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
						{{item}}{{index === 0 ? '('+applyList.length+')' : ''}}
					</view>
				</view>
			</scroll-view>
			<view v-if="0==TabCur">
				<view class="cu-list menu-avatar">
					<view class="cu-item" v-for="(item,index) in applyList" :key="index">
						<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
						<view class="content">
							<view>
								<view class="text-cut">{{item.wechatNickname}}</view>
								<view class="cu-capsule round" v-if="index>0">
									<view class='cu-tag bg-blue'>代</view>
								</view>
							</view>
							<view class="text-gray text-sm flex"> <view class="text-cut">{{item.applyTimeStr}}</view></view>
						</view>
						<view class="action">
							<view class="text-grey text-xs">{{item.allowedFlag ? '报名成功':'审核中'}}</view>
							<view class="cu-tag round bg-red sm">No.{{index+1}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="1==TabCur">
				<v-table :columns="columns" :list="tableData" v-if="tableData.length"></v-table>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar border shop foot">
			<button class="action" open-type="contact">
				<view class="cuIcon-share text-green"></view>
				分享
			</button>
			<view class="action">
				<view class="cuIcon-settings text-green"></view> 管理
			</view>
			<view class="action">
				<view class="cuIcon-notice text-green"></view>
				消息
			</view>
			<view class="bg-blue submit" @tap="routerToInfo">{{textPicker[list.applyButtonType]}}</view>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {baseUrl} from '@/config/index';
	import vTable from "@/components/table/table.vue"
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				list: {},
				TabCur: 0,
				tabList:['已报名', '详细数据'],
				textPicker: ['点击填写', '立即预约', '了解更多', '下一步', '立即报名'],
				applyList: [], // 已报名列表
				tableData: [],
				columns: [],
				getId: 0,
				watchTimes: 0,
			};
		},
		components: {
			vTable
		},
		onLoad(e) {
			console.log(e.id)
			this.getId = e.id
			uni.request({
				url: `${baseUrl}/activity/selectById`,
				data: {id: e.id}
			})
			.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
				var [error, res]  = data;
				if(res.data.recode !== '100') {
					uni.showToast({
						icon: 'none',
						title: error,
					});
					return
				}
				this.list = res.data.data
			})
		},
		onShow() {
			this.getApplyList(this.getId)
			uni.request({
				url: `${baseUrl}/activity/watchTimes`,
				data: {activityId: this.getId}
			})
			.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
				var [error, res]  = data;
				if(res.data.recode !== '100') {
					uni.showToast({
						icon: 'none',
						title: error,
					});
					return
				}
				this.watchTimes = res.data.data
			})
		},
		methods: {
			...mapMutations(['getFieldDetails']),
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			routerToInfo(e) {
				this.getFieldDetails(this.list)
				console.log(this.applyList)
				const ID = this.applyList.length ? this.applyList[0].id : ''
				if(this.list.agentCount > 0) {
					uni.navigateTo({
						url: `/pages/main/enroll/list?id=${this.list.id}`,
					});
				}else {
					uni.navigateTo({
						url: `/pages/main/enroll/info?type=only&id=${ID}`,
					});
				}
			},
			getApplyList(id) {
				uni.request({
					url: `${baseUrl}/apply/list`,
					data: {activityId: id}
				})
				.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
					var [error, res]  = data;
					if(res.data.recode !== '100') {
						uni.showToast({
							icon: 'none',
							title: error,
						});
						return
					}
					this.applyList = res.data.data.applyList
					this.tableData = []
					const TableData = this.applyList
					TableData.forEach(ele => {
						const Details = ele.details
						const OBJ = {}
						Details.forEach(item => {
							const Key = item.fieldId
							OBJ[item.fieldId] = item.content
						})
						this.tableData.push(OBJ)
					})
					this.columns = res.data.data.columns
					console.log(this.tableData)
				})
			}
		}
	};
</script>

<style>
	.lsc-enroll-info .lsc-info {
		display: block;
		overflow: hidden;
	}
	.lsc-enroll-info .lsc-info>.lsc-info-item {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		padding: 0 15px;
		min-height: 30px;
		background-color: #ffffff;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.lsc-enroll-info .lsc-item {
		padding: 0 15px;
	}
	.lsc-enroll-info .lsc-item>.lsc-item-title {
		font-size: 20px;
		line-height: 45px;
	}
	.lsc-enroll-info .lsc-item>.lsc-item-action {
		line-height: 25px;
	}
	
	.lsc-enroll-info .lsc-content>.lsc-content-info {
		padding: 10px;
		line-height: 28px;
	}
</style>
